@charset "UTF-8";
body{
	overflow: hidden;
	font-size: 16px;
}

.content-full {
    background-color: #000000;
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

.shrink{
	position: absolute;
	border-color: #3A6C9E;
	border-style:solid;
	background: #000000;
	opacity:0.7;
	filter:alpha(opacity=70);
}

.shrinkTitle{
	width: 100%;
	height: 2em;
}
.titleMain{
	width: 100%;
	height: calc(2em - 0.1em);
}
.titleIcon{
	width: 3em;
	height: 100%;
	float: left;
	position:relative;
}
.titleIcon img{
	width: 1.5em;
	height: 1.5em;
	position:absolute;
	left:1em;
	bottom:0;
}
.titleIconLine{
	width: 0.15em;
	background: #FFFFFF;
	height: calc(2em - 0.15em - 0.5em);
	float: left;
	margin-top: 0.5em;
}
.titleContent{
	width: calc(100% - 3em - 0.15em - 5em);
	height: 100%;
	float: left;
	position:relative;
}
.titleContent span{
	white-space: nowrap;
	font-size: 1em;
	color: #FFFFFF;
	background: #153663;
	position:absolute;
	padding-left:0.5em;
	left:0;
	bottom:0;
}
.titleClick{
	width: 5em;
	height: 100%;
	float: left;
}
.shrinkTitleLine{
	height: 0.1em;
	width: calc(100% - 2em);
	margin: 0 1em;
	background: #FFFFFF;
}

.shrinkMain{
	width: 100%;
	height: calc(100% - 2em);
	/* background: #FFFFFF; */
}

/* 定位 */
/*.left-top{
	left: 0;
	top: 0;
}
.right-top{
	left: 50%;
	top: 0;
}
.left-bottom{
	left: 0;
	top: 50%;
}
.right-bottom{
	left: 50%;
	top: 50%;
} */

.bg0{ background-color:#85af5d;}
.bg1{ background-color:#f87c68;} 
.bg2{ background-color:#29aae3;}
.bg3{ background-color:#035792;}

/* 新缩放 */
.enlarge{
	animation: enlarge 0.5s ease 1 forwards;
}
.narrow{
	animation: narrow 0.5s ease 1 forwards;
}
@keyframes enlarge {
  0% {
  	z-index:50;
  }
  100% {
  	z-index:50;
  }
}
@keyframes narrow {
  0% {
  	z-index:50;
  }
  100% {
  	z-index:10;
  }
}


/*左上*/
.lt-enlarge{
	animation: lt-enlarge 0.5s ease-out 1 forwards;
}
.lt-narrow{
	animation: lt-narrow 0.5s ease-out 1 forwards;
}

@keyframes lt-enlarge {
  0% {
  	z-index:50;
	width: 50%;
	height: 50%;
  }
  100% {
  	z-index:50;
	width: 100%;
	height: 100%;
  }
}

@keyframes lt-narrow{
  0% {
  	z-index:50;
	width: 100%;
	height: 100%;
  }
  100% {
  	z-index:0;
	width: 50%;
	height: 50%;
  }
}

/*右上*/
.rt-enlarge{
	animation: rt-enlarge 0.5s ease-out 1 forwards;	
}

.rt-narrow {
	animation: rt-narrow 0.5s ease-out 1 forwards;	
}

@keyframes rt-enlarge {
  0% {
  	left: 50%;
	top: 0;
  	z-index:50;
	width: 50%;
	height: 50%;
  }
  100% {
  	left: 0;
	top: 0;
	z-index:50;
	width: 100%;
	height: 100%;
  }
}

@keyframes rt-narrow {
  0% {
  	left: 0;
	top: 0;
	z-index:50;
	width: 100%;
	height: 100%;
  }
  100% {
  	left: 50%;
	top: 0;
	z-index:0;
	width: 50%;
	height: 50%;
  }
}

/*左下*/
.lb-enlarge{
	animation: lb-enlarge 0.5s ease-out 1 forwards;	
}

.lb-narrow {
	animation: lb-narrow 0.5s ease-out 1 forwards;	
}

@keyframes lb-enlarge {
  0% {
  	left: 0;
	top: 50%;
  	z-index:50;
	width: 50%;
	height: 50%;
  }
  100% {
  	left: 0;
	top: 0;
	z-index:50;
	width: 100%;
	height: 100%;
  }
}

@keyframes lb-narrow {
  0% {
  	left: 0;
	top: 0;
	z-index:50;
	width: 100%;
	height: 100%;
  }
  100% {
  	left: 0;
	top: 50%;
	z-index:0;
	width: 50%;
	height: 50%;
  }
}

/*右下*/
.rb-enlarge{
	animation: rb-enlarge 0.5s ease-out 1 forwards;	
}

.rb-narrow {
	animation: rb-narrow 0.5s ease-out 1 forwards;	
}

@keyframes rb-enlarge {
  0% {
  	left: 50%;
	top: 50%;
  	z-index:50;
	width: 50%;
	height: 50%;
  }
  100% {
  	left: 0;
	top: 0;
	z-index:50;
	width: 100%;
	height: 100%;
  }
}

@keyframes rb-narrow {
  0% {
  	left: 0;
	top: 0;
	z-index:50;
	width: 100%;
	height: 100%;
  }
  100% {
  	left: 50%;
	top: 50%;
	z-index:0;
	width: 50%;
	height: 50%;
  }
}